import React from "react";
import { Button, Layout, Avatar, Dropdown } from 'antd';
import './index.css'
import { MenuFoldOutlined , MenuUnfoldOutlined } from '@ant-design/icons' //菜单收回、展开图标
import { useDispatch } from 'react-redux' //用于调用store里的改变状态的方法
import { collapseMenu } from '../../store/reducers/tab'
import { useNavigate } from "react-router-dom";

const { Header } = Layout;

const CommonHeader = ({ collapsed }) => {
  const navigate = useNavigate()
  //登出
  const logout = () => {
    //清除token
    localStorage.removeItem('token')
    navigate('/login')
  }


  const items = [
      {
        key: '1',
        label: (
          <a target="_blank" rel="noopener noreferrer">
            个人中心
          </a>
        ),
      },
      {
        key: '2',
        label: (
          <a target="_blank" rel="noopener noreferrer" onClick={() => logout()}>
            退出
          </a>
        )
      }
  ];
  //创建dispatch
  const dispatch = useDispatch()
  //点击收起或展开菜单栏
  const setCollapsed = () => {
    console.log(collapsed)
    dispatch(collapseMenu())
  }

  return (
      <Header className="header-container">
          <Button
              type="text"
              icon={ collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined /> }
              style={{
                  fontSize: '16px',
                  width: 64,
                  height: 32,
                  backgroundColor: '#fff'
              }}
              onClick={setCollapsed}
          />
          <Dropdown menu={{items}}>
              <Avatar size={36} src={<img src={require("../../assets/images/glassBoy.png")}/>}/>
          </Dropdown>
      </Header>
  )
}

export default CommonHeader